<template>
  <div class="user">
    <van-sticky>
      <van-button type="primary">
        <header class="haeder">
          <span class="back" @click="fun()">&lt;</span>
          <span class="title-style">试用中心</span>
        </header>
        <div>
          <div class="title1">
            <div
              v-for="(item, index) in titleList1"
              :key="index"
              @click="clickSelect(item, index)"
              :class="{ red: isactive1 == index }"
            >
              <div>{{ item.val }}</div>
              <div>{{ item.val2 }}</div>
            </div>
          </div>
        </div>
      </van-button>
    </van-sticky>

    <Aa v-if="this.isactive1 == '0'" :allList='allList'></Aa>
    <Ba v-if="this.isactive1 == '1'" :list='list'></Ba>
    <Jie v-if="this.isactive1 == '2'" :jieList="jieList"></Jie>
    <Rong v-if="this.isactive1 == '3'" :roList='roList'></Rong>
    <Ll v-if="this.isactive1 == '4'" :contList='contList'></Ll>
  <Btm></Btm>
    </div>
</template>

<script>
import Vue from "vue";
import { Sticky } from "vant";

Vue.use(Sticky);

import { getlink } from "@/api/getapi.js";
import Aa from "../../components/xQ/all.vue";
import Ba from "../../components/xQ/jia.vue";
import Jie from "../../components/xQ/jie.vue";
import Rong from "../../components/xQ/rong.vue";
import Ll from "../../components/xQ/liliao.vue";
import Btm from "../../components/xQ/bottom.vue"
export default {
  

  components: { Aa, Ba, Jie, Rong, Ll,Btm},
  data() {
    return {
      allList:[],
      list:[],
      isactive1: "0",
      titleList1: [
        { val: "全部", val2: "好试精选", code: 1 },
        { val: "美甲", val2: "好试精选", code: 2 },
        { val: "美睫", val2: "好试精选", code: 3 },
        { val: "美容", val2: "好试精选", code: 4 },
        { val: "医疗", val2: "好试精选", code: 5 },
      ],
      jiekou:[],
     
      //  cont2: [
      //   {
      //     img: "img/5.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/6.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188"}],
      //   },
      //   {
      //     img: "img/5.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/6.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/5.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/6.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/5.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/6.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/5.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/6.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      // ],
      //  cont3: [
      //   {
      //     img: "img/7.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/8.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/7.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/8.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/7.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/8.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/7.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/8.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/7.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //      marketprice: "￥88",
      //     cont2: [{ img: "img/8.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      // ],
      //  cont4: [
      //   {
      //     img: "img/9.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [
      //       {
      //         img: "img/10.webp",
      //         name: "1111111111111111",
      //         price: "￥99.0",
      //         marketprice: "￥188",
      //       },
      //     ],
      //   },
      //   {
      //     img: "img/9.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [
      //       {
      //         img: "img/10.webp",
      //         name: "1111111111111111",
      //         price: "￥99.0",
      //         marketprice: "￥188",
      //       },
      //     ],
      //   },
      //   {
      //     img: "img/9.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [
      //       {
      //         img: "img/10.webp",
      //         name: "1111111111111111",
      //         price: "￥99.0",
      //         marketprice: "￥188",
      //       },
      //     ],
      //   },
      //   {
      //     img: "img/9.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [
      //       {
      //         img: "img/10.webp",
      //         name: "1111111111111111",
      //         price: "￥99.0",
      //         marketprice: "￥188",
      //       },
      //     ],
      //   },
      //   {
      //     img: "img/9.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [
      //       {
      //         img: "img/10.webp",
      //         name: "1111111111111111",
      //         price: "￥99.0",
      //         marketprice: "￥188",
      //       },
      //     ],
      //   },
      // ],
      //  cont0: [
      //   {
      //     img: "img/1.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [{ img: "img/2.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/1.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [{ img: "img/2.webp", name: "1111111111111111", price: "￥99.0" ,marketprice: "￥188"}],
      //   },
      //   {
      //     img: "img/1.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [{ img: "img/2.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      //   {
      //     img: "img/1.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [{ img: "img/2.webp", name: "1111111111111111", price: "￥99.0" ,marketprice: "￥188"}],
      //   },
      //   {
      //     img: "img/1.webp",
      //     name: "和v和v和v哈哈",
      //     price: "￥9.0",
      //     marketprice: "￥88",
      //     cont2: [{ img: "img/2.webp", name: "1111111111111111", price: "￥99.0",marketprice: "￥188" }],
      //   },
      // ],
    };
  },
  methods: {
    clickSelect(item, index) {
      this.isactive1 = index;
      getlink(`/api/findAllById?level1=${item.code}`).then((res) => {
        console.log(res);
        this.list=res.data;
    });
    },
    fun() {
      this.$router.push("/Home");
    },
  },
   mounted() {
    getlink("/api/findAllById?level1=1").then((res) => {
      // console.log(res);
      this.allList = res.data
      // let arr = []
      // res.data.forEach(item=>{
      //   if(item.gid===2){
      //     arr.push(item)
      //   }
      // })
      // this.jiekou = arr
      // console.log(arr,'99999');
    });
   
   },

};
</script>

<style scoped>
.van-button--primary {
  background: none;
  border: none;
  width: 100%;
  
}
.van-button__content,
.van-button__text {
  width: 100%;
}
.van-button--normal {
  padding: 0;
}
.haeder {
  height: 1rem;
  display: flex;
  justify-content: space-between;
  background-image: url("../../../public/img/header.png");
  width: 100%;
}
.van-button--primary {
  height: 1.8rem;
}
.haeder img {
  width: 100%;
  height: 1rem;
}
.haeder .back {
  font-size: 0.5rem;
  line-height: 1rem;
  margin-left: 0.4rem;
}
.haeder .title-style {
  margin-right: 3rem;
  font-size: 0.5rem;
  margin-top: 0.2rem;
}
.title1 {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.2rem;
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(245,245,245);
  color: #333;
}
.title2 {
  display: flex;
  justify-content: space-between;
  font-size: 0.16rem;
}
.red {
  color: red !important;
}
.van-button::before {
  position: relative;
}

</style>
